local html = [[
  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <title>Hello 触动精灵 ShowUI</title>
      <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <meta http-equiv="Access-Control-Allow-Origin" content="*">
      <!--css-->
      <style>
        .rxui {display: flex; justify-content: center; align-items: center; line-height: 14px; font-size: 15px; height: 100vh; flex-direction: column;}
        .content {margin: 0 10px;}
        .content pre {line-height: 13px; max-height:50%; overflow-y: scroll; word-wrap:break-word; white-space: pre-wrap;}
        .content pre span {line-height: 18px;}
        .rxui_title {margin: 0 auto; text-align: center; padding: 5px 0; background-color: #ccc; margin-bottom: 10px;}
        .rxui_des_content {color: #666; margin: 0;}

        #rxui_update {display: none;}
        #rxui_update {max-width: 95%; min-width: 70%; border: 1px solid #ccc; padding-bottom: 10px;}

        /* 加载动画 */
        /* https://juejin.cn/post/7159223323355217928 */
        /* #rxui_loading {
          display: none;
        } */

        .rxui_loading .netLoad.netLoaded {
          display: none;
        }

        #rxui_loading .netLoad {
          display: block;
          animation: rotateDo 1s linear infinite;
          width: 50px; height: 50px; margin: 0 auto;
          border: 5px solid #0ff; border-radius: 50%;
          position: relative;
        }

        #rxui_loading .netLoad>.box {
          position: absolute; top: 50%; left: 50%;  width: 50%; height: 50%;
          background-color: white;
          transform: rotate(40deg);
        }

        @keyframes rotateDo {
          from {
            transform-origin: center center;
            transform: rotate(0deg);
          }
          to {
            transform-origin: center center;
            transform: rotate(360deg);
          }
        }
        #rxui_loading .rx_load_text {margin: 15px 0; font-size: 14px;}

        #rxui_last {display: none;}
        #rxui_none {display: none;}
        .rxui_updated {text-align: center; font-size: 14px; font-weight: bold; margin-bottom: 20px;}

        .rxui_buttons {display: flex; justify-content: center; align-items: center; }
        .rxui_button {margin-right: 30px; padding: 5px 10px;}
        .rxui_button:last-child { margin-right: 0;}
        /* .rxui_button_confim {background-color: blueviolet; color: white;} */
        .rxui_button:link{background-color: #0ff;}

        .rx_no_select {
          -webkit-touch-callout: none; /* iOS Safari */
          -webkit-user-select: none; /* Chrome/Safari/Opera */
          -khtml-user-select: none; /* Konqueror */
          -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently not supported by any browser */
        }

      </style>
  <body onload="getTsVersion()">
    <div class="rxui">

      <!----------------- 1 首次加载 请求网络  ----------------------->
      <div id=rxui_loading>
        <div id="loading" class="netLoad">
          <div class="box"></div>
        </div>
        <div class="rx_load_text rx_no_select">检查是否有更新</div>
        <div class="rxui_buttons rx_no_select">
          <button id="btn_cancel"  class="rxui_button rxui_button_confim">取消更新</button>
        </div>
      </div>

      <!----------------- 2 有更新  ----------------------->
      <div id="rxui_update">
        <div class="rxui_title">更新</div>
        <div class="content">
          <div class="rxui_des rx_no_select">描述</div>
          <div class="rxui_des_content">
            <pre id="rxui_id_des">none</pre>
          </div>

          <div class="rxui_buttons rx_no_select">
            <button id="btn_cancel" class="rxui_button">取消</button>
            <button id="btn_update" class="rxui_button rxui_button_confim">更新</button>
          </div>
        </div>
      </div>

      <!----------------- 3 最新代码，无需更新  ----------------------->
      <div id=rxui_last>
        <div class="content">
          <div class="rxui_updated rx_no_select">当前已是最新版本</div>
          <div class="rxui_buttons rx_no_select">
            <button id="btn_cancel" class="rxui_button rxui_button_confim">关闭</button>
          </div>
        </div>
      </div>

      <!----------------- 4 无法关闭  ----------------------->
      <div id=rxui_none>
        <div class="content">
          <div class="rxui_updated rx_no_select">脚本没有关闭吗？</div>
          <div class="rxui_buttons rx_no_select">
            <button id="btn_cancel" class="rxui_button rxui_button_confim">关闭</button>
          </div>
        </div>
      </div>

    </div>

    <script>
      // 请求工具

      let xhr = null

      function requestBase(method, ApiUrl, data, succ, fail, final) {
        post_abort()
        method = method || 'POST'
        data = data || ''
        if (!xhr) {
          xhr = new XMLHttpRequest()
        }

        if ("withCredentials" in xhr) {
          // XHR for Chrome/Firefox/Opera/Safari.
          xhr.open(method, ApiUrl, true);
        }
        else if (typeof XDomainRequest != "undefined") {
          // XDomainRequest for IE.
          xhr = new XDomainRequest();
          xhr.open(method, ApiUrl);
        }
        else {
          // CORS not supported.
          xhr = null;
        }

        if (!xhr) {
          fail && fail()
          final && final()
          return
        }

        xhr.setRequestHeader("Content-type", "application/json")
        xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
        xhr.setRequestHeader("Cache-Control","no-cache");
        xhr.onreadystatechange = function() {
          const XMLHttpReq = xhr
          if (XMLHttpReq.readyState == 4 && XMLHttpReq.status == 200) {
            const text = XMLHttpReq.responseText;
            console.log(text)
            succ && succ(text)
            final && final()
          } else {
            console.log(XMLHttpReq.readyState)
            fail && fail()
            final && final()
          }
        }
        xhr.send(data);
      }

      function requestGet(ApiUrl, data, succ, fail, final) {
        requestBase('GET', ApiUrl, data, succ, fail, final)
      }

      function requestPost(ApiUrl, data, succ, fail, final) {
        requestBase('POST', ApiUrl, data, succ, fail, final)
      }

      // ----- 按钮点击 确认
      function post_confirm(data) {
        console.log('点击 确认按钮 /set_event showUI_commit')
        requestPost(
          '/set_event', // postApi
          ('{"name": "showUI_commit","value":' + data + '}'), // data
          () => {
            // succ
          }, () => {
            // false
          }, () => {
            xhr = null
          }
        )
      }

      // ----- 按钮点击 取消
      function post_cancel() {
        console.log('点击 取消按钮 /set_event showUI_cancel')
        requestPost(
          '/set_event',
          '{"name": "showUI_cancel"}',
          () => {
            // succ
          }, () => {
            // false
          }, () => {
            xhr = null
          }
        )
      }

      // -------- 取消 请求 --------
      function post_abort() {
        xhr && xhr.abort()
      }
    </script>

    <script>
      // 按钮点击
      function btnOnClick(btnId, cb) {
        document.getElementById(btnId).onclick = function() {
          cb && cb()
        }
      }

      // 点击取消
      btnOnClick('btn_cancel', () => post_cancel())

      // 点击确定
      btnOnClick('btn_update', () => {

      })
    </script>

    <script>
      function getTsVersion() {
        // 请求是否更新
        const lzy = "https://api.leafone.cn/api/lanzou?url"
        const lzy_url = "https://wwm.lanzouj.com/i9fnh20o4i9i"
        const pw = '&pwd=c7ym'
        const url = lzy + lzy_url + pw


        function questEnd(isSucc, res) {
          isSucc = isSucc || false
          if (isSucc) {
            console.log('蓝奏云请求 成功了----')
            console.log(res)
          } else {
            console.log('蓝奏云请求 失败')
          }
        }

        requestGet(url,null, (e)=> {questEnd(true, e)}, ()=>{questEnd(), () => {}})
      }
    </script>
  </body>
  </html>
]]
local thread = require('thread')
local event = require('event')
--创建 webview
local showui_view,err = require('webview').new("myshowui",
    {html=html})
assert(showui_view,err)
event.register("showUI_commit",function(value)
    local ts = require("ts")--使用扩展库前必须插入这一句
    local json = ts.json--使用 JSON 模块前必须插入这一句
    toast(json.encode(value),5)
    showui_view.close()
end)

event.register("showUI_cancel",function(value)
    showui_view.close()
end)
showui_view.show()
thread.waitAllThreadExit()